<template>
  <div class="main-layout">
    <div class="sidebar">
      <div class="logo-container">
        <div class="logo">QingBook</div>
      </div>
      
      <nav class="nav-menu">
        <router-link 
          v-for="item in navItems" 
          :key="item.name"
          :to="item.path"
          class="nav-item"
          :class="{ 'active': $route.path === item.path }"
        >
          <component :is="item.icon" class="nav-icon" />
          <span class="nav-text">{{ item.name }}</span>
        </router-link>
      </nav>
      
      <div class="user-section">
        <div class="user-info">
          <img :src="user.avatarUrl" alt="用户头像" class="user-avatar">
          <div class="user-details">
            <div class="username">{{ user.nickname || user.username }}</div>
            <div class="user-id">@{{ user.username }}</div>
          </div>
        </div>
        <div class="user-actions">
          <button class="settings-btn" @click="goToSettings">
            <SettingsIcon class="icon" />
          </button>
          <button class="logout-btn" @click="handleLogout">
            <LogOutIcon class="icon" />
          </button>
        </div>
      </div>
    </div>
    
    <main class="content">
      <router-view></router-view>
    </main>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/store/auth'
import { 
  SearchIcon, PlusCircleIcon, 
  MessageCircleIcon, UserIcon, SettingsIcon, LogOutIcon 
} from 'lucide-vue-next'

const router = useRouter()
const authStore = useAuthStore()

const user = computed(() => {
  return authStore.user || {
    nickname: '用户',
    username: 'username',
    avatarUrl: 'https://via.placeholder.com/40'
  }
})

const navItems = [
  { name: '发现', path: '/discover', icon: SearchIcon },  
  { name: '发布', path: '/publish', icon: PlusCircleIcon },
  { name: '消息', path: '/messages', icon: MessageCircleIcon },
  { name: '我的', path: '/profile', icon: UserIcon },
]

const handleLogout = async () => {
  try {
    await authStore.logout()
    router.push('/login')
  } catch (error) {
    router.push('/login')
  }
}

const goToSettings = () => {
  router.push('/settings')
}
</script>

<style scoped>
.main-layout {
  display: flex;
  min-height: 100vh;
  background-color: #f8f9fa;
}

.sidebar {
  width: 240px;
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  z-index: 100;
}

.logo-container {
  padding: 24px 16px;
  border-bottom: 1px solid #eee;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: var(--color-primary);
}

.nav-menu {
  flex: 1;
  padding: 16px 0;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  text-decoration: none;
  color: #333;
  transition: all 0.3s;
}

.nav-item:hover {
  background-color: #f5f5f5;
}

.nav-item.active {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  border-left: 4px solid var(--color-primary);
}

.nav-icon {
  width: 24px;
  height: 24px;
  margin-right: 12px;
}

.nav-text {
  font-size: 16px;
  font-weight: 500;
}

.user-section {
  padding: 16px;
  border-top: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
}

.user-details {
  flex: 1;
}

.username {
  font-weight: 500;
  margin-bottom: 2px;
}

.user-id {
  font-size: 12px;
  color: #888;
}

.user-actions {
  display: flex;
  gap: 8px;
}

.settings-btn, .logout-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.settings-btn:hover, .logout-btn:hover {
  background-color: #f5f5f5;
}

.logout-btn:hover .icon {
  color: #ff4d4f;
}

.icon {
  width: 20px;
  height: 20px;
  color: #666;
  transition: color 0.2s;
}

.content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}
</style>